import { FC, MouseEvent, useEffect } from 'react';
import styles from './styles.module.less';
import { scrollFun } from '@/config/scrollRevealConfig';
import jiagou from '@/assets/img/jiagou.png'
import t1 from '@/assets/img/t1.svg'
import t2 from '@/assets/img/t2.svg'
import t3 from '@/assets/img/t3.svg'
import t4 from '@/assets/img/t4.svg'
import zjj from '@/assets/img/zjj.png'
import hzhb from '@/assets/img/hzhb.png'

const Home: FC = () => {
  useEffect(() => {
    scrollFun();
  }, []);

  const onMouseEnter = (e: MouseEvent<HTMLDivElement>) => {
    const target = e.currentTarget;
    const list = document.querySelectorAll(`.${styles.minuItem}`);
    list.forEach((node) => {
      node.classList.remove(styles.active);
    });

    const iconList = document.querySelectorAll('.panel-icon');
    iconList.forEach((node) => {
      node.classList.remove('icon-jianhao_o');
      node.classList.add('icon-jiahao');
    });
    target.classList.add(styles.active);
    const node: any = target.firstChild?.firstChild?.firstChild;
    node?.classList?.remove('icon-jiahao');
    node?.classList?.add('icon-jianhao_o');
  };

  return (
    <>
      <section className={styles.col1}>
        <div className={styles['background-media']}></div>
        <div className={styles['background-color']}></div>
        <div className={styles.content}>
          <div className={styles.row}>
            <div className={`${styles.left} `} id="col1-left">
              <div className={styles.leftWrap}>
                <h1>
                  <span style={{ fontSize: 74, color: '#fff', fontWeight: 'normal' }}>智能运维产品家族</span>
                </h1>
                <div className={styles.desc}>
                  <span style={{ fontSize: 18 }}>打造企业级智能运维管理平台，帮助企业更高效地管理和维护其复杂的IT系统，提高系统的可用性和稳定性，降低运维成本。</span>
                </div>
                <div className={styles.btn}>
                  <button>申请试用(暂未开放)</button>
                </div>
              </div>
            </div>
            <div className={styles.right} style={{ width: '46.4%' }} id="col1-right">
              <div className={styles.rightWrap}>
                <img
                  className={styles.front_image}
                  src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi80YTkwZDQ3YjdhZTczODk1ODRkMjJlMTI2Y2ViOTg5ZC5wbmc_p_p100_p_3D.png"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col2}>
        <div className={styles['background-color']}></div>
        <div className={`${styles.container} ${styles.target}`}>
          <div className={`${styles.row} ${styles.targetRow}`} id="col2-row">
            <div className={styles.headerTitle}>
              <h2>我们的目标</h2>
              <span></span>
            </div>
            <div className={styles.too}>
              &emsp;&emsp;智能运维产品家族的目标是提高运维的智能化和自动化水平，帮助企业更好地管理和维护其IT系统，提高系统的可用性和稳定性。
              智能运维产品家族主要包括以下几个部分：智能监控系统、智能日志分析、智能自动化运维、API网关管理、CMDB管理、可定制化大屏等。<br />
              &emsp;&emsp;智能运维的最终目标是实现故障预测和预防，通过分析历史数据和预测模型，提前预测潜在的故障和问题，及时采取措施，减少系统停机时间和故障率，提高系统的可用性和稳定性。
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col3}>
        <div className={styles['background-color']}></div>
        <div className={`${styles.container} ${styles.tabs}`}>
          <div className={`${styles.row} ${styles.homeRow}`} id="col3-row">


            <div className={styles.headerTitle}>
              <h2>
                智能运维产品架构
              </h2>
              <span ></span>
            </div>
            <div>
              <img src={jiagou} />
            </div>
          </div>
        </div>
      </section>
      <section className={styles.col4}>
        <div className={styles['background-media']}></div>
        <div className={styles['background-color']}></div>
        <div className={`${styles.container} ${styles['col4-con']}`}>
          <div className={`${styles.row} ${styles['col4-row']}`} id="col4-row">
            <div className={styles.headerTitle}>
              <h2>微呼自主可控中间件</h2>
              <span></span>
            </div>
            <div className={styles['col4-row-content']}>
              <ul>
                <li className="col4-left">
                  <img src={t1} />
                  <h3>基于国密算法</h3>
                </li>
                <li className="col4-left">
                  <img src={t2} />
                  <h3>通过信创测试</h3>
                </li>
                <li className="col4-right">
                  <img src={t3} />
                  <h3>运行稳定高效</h3>
                </li>
                <li className="col4-right">
                  <img src={t4} />
                  <h3>团队稳定雄厚</h3>
                </li>
              </ul>
            </div>

          </div>
        </div>
      </section>
      <section className={styles.col5}>
        <div className={styles['background-color']}></div>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.left} id="col5-left">
              <div className={styles.leftWrap}>
                <img src={zjj} />
              </div>
            </div>
            <div className={styles.right} id="col5-right">
              <div className={styles.headerTitle}>产品优势</div>
              <div className={styles.minus}>
                <div className={`${styles.minuItem} ${styles.active}`} onMouseEnter={onMouseEnter}>
                  <h4 className={styles['panel-title']}>
                    <div className={styles['toggle-icon']} style={{ float: 'left' }}>
                      <i className="iconfont icon-jianhao_o panel-icon"></i>
                    </div>
                    <div className={styles['toggle-heading']}>自主可控</div>
                    <div style={{ clear: 'both' }}></div>
                  </h4>
                  <section className={`${styles['panel-text']}`}>
                    我司中间件为自研的一款标准、可控、高性能并通过工信部测试具备商用能力的企业级中间件。
                  </section>
                </div>
                <div className={`${styles.minuItem} `} onMouseEnter={onMouseEnter}>
                  <h4 className={styles['panel-title']}>
                    <div className={styles['toggle-icon']} style={{ float: 'left' }}>
                      <i className="iconfont icon-jiahao panel-icon"></i>
                    </div>
                    <div className={styles['toggle-heading']}>安全可靠</div>
                    <div style={{ clear: 'both' }}></div>
                  </h4>
                  <section className={`${styles['panel-text']}`}>
                    提供防篡改、认证与授权、数据库安全访问、加解密算法、长事务性能优化等功能，保证数据及传输信道的安全性。

                  </section>
                </div>
                <div className={`${styles.minuItem} `} onMouseEnter={onMouseEnter}>
                  <h4 className={styles['panel-title']}>
                    <div className={styles['toggle-icon']} style={{ float: 'left' }}>
                      <i className="iconfont icon-jiahao panel-icon"></i>
                    </div>
                    <div className={styles['toggle-heading']}>降本增效</div>
                    <div style={{ clear: 'both' }}></div>
                  </h4>
                  <section className={`${styles['panel-text']}`}>
                    对运维人员水平要求低，无需采购，无版权和投诉问题，降低运维成本，增加效益。
                  </section>
                </div>
                <div className={`${styles.minuItem} `} onMouseEnter={onMouseEnter}>
                  <h4 className={styles['panel-title']}>
                    <div className={styles['toggle-icon']} style={{ float: 'left' }}>
                      <i className="iconfont icon-jiahao panel-icon"></i>
                    </div>
                    <div className={styles['toggle-heading']}>支持信创</div>
                    <div style={{ clear: 'both' }}></div>
                  </h4>
                  <section className={`${styles['panel-text']}`}>
                    我司中间件支持信创环境下，所有新建、改造系统的应用。
                  </section>
                </div>
                <div className={`${styles.minuItem} `} onMouseEnter={onMouseEnter}>
                  <h4 className={styles['panel-title']}>
                    <div className={styles['toggle-icon']} style={{ float: 'left' }}>
                      <i className="iconfont icon-jiahao panel-icon"></i>
                    </div>
                    <div className={styles['toggle-heading']}>服务周到</div>
                    <div style={{ clear: 'both' }}></div>
                  </h4>
                  <section className={`${styles['panel-text']}`}>
                    技术支持力度大、解决问题周期短、客户需求响应快、售后服务质量优。
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className={styles.col7}>
        <div className={styles['background-color']}></div>
        <div className={styles.container}>
          <div className={styles.row} id="col7-row">
            <div className={styles.headerTitle}>
              <h2>合作伙伴</h2>
              <span></span>
            </div>
            <div className={styles.context}>
              <img src={hzhb} />
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Home;
